<template>
  <div>
    <el-container>
      <!-- 头部放置查询框和新增按钮 -->
      <el-header>
        <el-row :gutter="16">
          <!-- 查询框部分 -->
          <el-form v-model="configParams" label-width="80px">
            <el-col :span="8">
              <el-form-item label="应用名称">
                <el-input v-model="configParams.name" placeholder="请输入名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人">
                <el-input v-model="configParams.contact" placeholder="请输入联系人" />
              </el-form-item>
            </el-col>
          </el-form>
          <el-col :span="2">
            <el-button type="primary" @click="search">查询</el-button>
          </el-col>
          <el-col :span="4">
            <el-button @click="reset">重置</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="showChange1">新增</el-button>
          </el-col>
        </el-row>
      </el-header>
      <!-- 主体放置表格 -->
      <el-main>
        <el-table
          border
          v-loading="loading"
          :data="tableData"
          max-height="500px"
          :default-sort="{prop: 'id', order: 'ascending'}"
        >
          <el-table-column label="" type="index" align="center" fixed />
          <el-table-column label="应用名称" align="left" prop="name" />
          <el-table-column label="接入原因" align="left" prop="remark" />
          <el-table-column label="AppId" align="left" prop="appId" />
          <el-table-column label="secKey" align="left" prop="secKey" />
          <el-table-column label="联系人" align="left" prop="contact" />
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-row :gutter="16">
                <el-button type="text" size="small" @click.native.prevent="showChange2(scope.row)">
                  编辑
                </el-button>
                <el-button type="text" size="small" @click.native.prevent="showChange3(scope.row)">
                  删除
                </el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!--下面展示总共条数和切换页面-->
        <div class="block">
          <el-pagination
            v-show="total > 0"
            background
            layout="total, prev, pager, next, sizes"
            :total="total"
            :page-sizes="[10, 20, 30, 40, 50]"
            :current-page.sync="pageForm.pageNum"
            :page-size="pageForm.pageSize"
            @pagination="getData"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-main>
    </el-container>

    <!-- 新增编辑应用配置 -->
    <el-dialog :title="title" :visible.sync="show1" width="90%" append-to-body>
      <ConfigApi ref="configApi" :configIds="id" :showDia="show1" @showChange="$event => showChange()" />
    </el-dialog>
    <!-- 删除应用 -->
    <el-dialog title="删除应用" :visible.sync="show2" append-to-body>
      <div>请问是否确定删除该项应用？</div>
      <div>
        <el-button type="primary" @click="delData">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listConfig, delConfig } from '@/api/system/outapi/manage'
import ConfigApi from './configApi.vue'

export default {
  name: 'App',
  components: {
    ConfigApi
  },
  data() {
    return {
      loading: true, // 遮罩层
      show1: false, // 应用新增编辑表单弹窗开关
      show2: false, // 应用删除弹窗开关
      tableData: [], // 表格数据
      total: 1, // 数据总条数
      title: null, // 表单弹窗名称
      id: null,
      pageForm: { // 页面对象
        pageNum: 1,
        pageSize: 10
      },
      configParams: { // 应用接口配置查询表单对象
        pageNum: null,
        pageSize: null,
        id: null,
        appId: null, // 不传值
        name: null,
        secKey: null, // 不传值
        mobile: null, // 不传值
        contact: null
      },
      configForm: { // 应用接口配置表单对象
        id: null,
        appId: null, // 不传值
        name: null,
        secKey: null, // 不传值
        mobile: null, // 不传值
        contact: null,
        remark: null,
        createTime: null, // 不传值
        createBy: null // 不传值
      }
    }
  },
  created() {
    this.initVue()
  },
  methods: {
    initVue() { // 页面初始化
      this.initForm()
      this.configParams.pageNum = this.pageForm.pageNum
      this.configParams.pageSize = this.pageForm.pageSize
      this.loading = false
      this.getData()
    },
    getData() { // 获取数据
      this.loading = true
      listConfig(this.configParams).then(response => {
        this.total = response.total
        this.tableData = response.rows
        this.loading = false
      })
    },
    delData() { // 删除数据
      delConfig(this.configForm.id).then(response => {
        this.show2 = false
        this.initVue()
      })
    },
    initForm() { // 重置configForm对象
      this.configForm = {
        id: null,
        appId: null,
        name: null,
        secKey: null,
        mobile: null,
        contact: null,
        remark: null,
        createTime: null,
        createBy: null
      }
    },
    search() { // 搜索按钮
      this.pageForm.pageNum = 1
      this.configParams.pageNum = this.pageForm.pageNum
      this.configParams.pageSize = this.pageForm.pageSize
      this.getData()
    },
    reset() { // 重置按钮
      this.configParams.name = null
      this.configParams.contact = null
    },
    showChange1() { // 打开新增应用表单
      this.initForm()
      this.configForm.pageNum = this.pageForm.pageNum
      this.configForm.pageSize = this.pageForm.pageSize
      this.title = '新增应用'
      this.id = this.configForm.id
      this.show1 = true
    },
    showChange2(data) { // 打开编辑应用表单
      this.configForm = data
      this.title = '编辑应用'
      this.id = this.configForm.id
      this.show1 = true
    },
    showChange3(data) { // 打开删除确认弹窗
      this.configForm.id = data.id
      this.show2 = true
    },
    cancel() { // 取消删除
      this.show2 = false
    },
    showChange() { // 新增编辑应用表单弹窗关闭
      this.show1 = this.$refs.configApi.getShow()
      if (this.id == null) {
        this.initForm()
        this.pageForm.pageNum = 1
        this.configParams.pageNum = this.pageForm.pageNum
        this.configParams.pageSize = this.pageForm.pageSize
        this.getData()
      }
    },
    handleCurrentChange() { // 切换页面
      this.configParams.pageNum = this.pageForm.pageNum
      this.configParams.pageSize = this.pageForm.pageSize
      this.getData()
    },
    handleSizeChange(val) { // 切换页面大小
      this.pageForm.pageNum = 1
      this.pageForm.pageSize = val
      this.configParams.pageNum = this.pageForm.pageNum
      this.configParams.pageSize = this.pageForm.pageSize
      this.getData()
    }
  }
}
</script>
<style>
.el-header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
</style>
